<template>
  <div class="visualization-system">
    <header>
      <router-link class="return-btn" tag="p" to="/">返回系统</router-link>
      <h1>数据可视化-ChinaUnicom</h1>
      <p class="show-time">{{ currentTime }}</p>
    </header>
    <section class="main-box">
      <LeftColumn/>
      <CenterColumn/>
      <RightColumn/>
    </section>
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, ref} from "vue";
import dayjs from "dayjs";
import CenterColumn from "@/views/VisualizationSystem/CenterColumn/CenterColumn.vue";
import LeftColumn from "@/views/VisualizationSystem/LeftColumn/LeftColumn.vue";
import RightColumn from "@/views/VisualizationSystem/RightColumn/RightColumn.vue";


// 设置时间
const currentTime = ref(dayjs().format("当前时间：YYYY年MM月DD日-HH时mm分ss秒"))
const timer = setInterval(() => {
  currentTime.value = dayjs().format("当前时间：YYYY年MM月DD日-HH时mm分ss秒")
}, 1000)

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="less">
.visualization-system {
  background: url("../../assets/images/bg.jpg") no-repeat top center;
  background-size: cover;
  line-height: 1.15;

  header {
    height: 1.25rem;
    background: url("../../assets/images/head_bg.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    padding: 0.25rem;
    .return-btn {
      color: rgba(255, 255, 255, .7);
      font-size: 0.25rem;
    }

    h1 {
      color: #fff;
      font-size: 0.475rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .show-time {
      color: rgba(255, 255, 255, .7);
      font-size: 0.25rem;
    }
  }

  .main-box {
    min-width: 1024px;
    max-width: 1980px;
    padding: .125rem .125rem 0;
    margin: 0 auto;
    display: flex;

    .column {
      flex: 3;

      &:nth-of-type(2) {
        margin: 0 10px 15px 10px;
        flex: 5;
      }
    }
  }

}
</style>
